<template>
  <client-only>
    <v-row v-if="tweet">
      <!--      <TweetItemHeader :tweet="props.tweet" :id="tweet.id" />-->
      <v-col style="max-width: 4%; flex: 0 0 4%" class="pl-6 pt-6" :id="tweet.id">
        <!--        <div>-->
        <v-avatar size="52" class="mb-2">
          <v-img :src="tweet.user.userInfo.avatar"></v-img>
        </v-avatar>
        <div class="d-tw-timeLine" :style="{ height: timeLineHeight }" v-if="timeLine"></div>
        <!--          <div class="ml-3">-->

        <!--          </div>-->
        <!--        </div>-->
      </v-col>
      <v-col>
        <!--        <div :class="tweetBodyWrapper">-->
        <div class="mt-4" style="margin-left: 5%">
          <span class="font-medium text-gray-800 dark:text-white">{{ tweet.user.nickname }}</span>
          <span class="text-gray-400 text-sm dark:text-white"
            >&nbsp&nbsp{{ timeAgoFilter(tweet.createTime) }}</span
          >
          <div v-if="tweet?.parentUserId != null" class="text-sm">
            <span>回复&nbsp</span
            ><a target="_blank" :href="`/user/${tweet.parentUserId}`">
              <span class="text-sky-500">@{{ tweet.replyUserName }}</span>
            </a>
          </div>
          <div
            :class="textSize"
            class="w-auto flex-shrink font-medium text-gray-800 dark:text-white d-t-content"
          >
            <template
              v-if="
                tweet.type === InfinityType.Tweet || tweet.type === InfinityType.TweetCommentOrReply
              "
            >
              {{ props.tweet.content }}
            </template>
            <template v-else>
              <div v-if="InfinityType.Article === tweet.type">
                <p style="color: #00a0d8">发布文章：</p>
                <p class="text-subtitle-1">《{{ props.tweet.content.split('\n')[0] }}》</p>
                <div style="background-color: rgba(17, 17, 17, 0.03)" class="pa-2">
                  {{ tweet.content.substring(tweet.content.indexOf('\n')) }}
                </div>
                <v-btn
                  variant="text"
                  class="mt-1"
                  style="margin-left: 85%"
                  color="#164a84"
                  target="_blank"
                  :href="`/article/${tweet.refId}`"
                  @click.stop=""
                  >查看原文
                </v-btn>
              </div>
              <div v-if="InfinityType.Question === tweet.type">
                <p style="color: #00a0d8">提问：</p>
                <p class="text-subtitle-1">《{{ props.tweet.content.split('\n')[0] }}》</p>
                <div style="background-color: rgba(17, 17, 17, 0.03)" class="pa-2">
                  {{ tweet.content.substring(tweet.content.indexOf('\n')) }}
                </div>
                <v-btn
                  variant="text"
                  class="mt-1"
                  style="margin-left: 85%"
                  color="#6d00fc"
                  target="_blank"
                  :href="`/question/${tweet.refId}`"
                  @click.stop=""
                  >查看问题
                </v-btn>
              </div>
            </template>
            <template v-for="p in props.tweet.infinityTopics">
              <p class="text-sky-500">#{{ p.name }}</p>
            </template>
          </div>

          <template v-if="hasImg">
            <vue-easy-lightbox
              :visible="visibleRef"
              :imgs="tweet.imgUrlList"
              :index="ShowIndex"
              :loop="true"
              :moveDisabled="false"
              :scrollDisabled="true"
              @hide="onHide"
              teleport="main"
              :zoomScale="0.3"
            >
              <!--              teleport="body"-->
            </vue-easy-lightbox>
            <div class="mt-3">
              <!--        //用v-for循环渲染缩略图-->
              <v-row
                :class="{
                  ImgCard: props.tweet.type === InfinityType.Tweet,
                  notTweCard: props.tweet.type !== InfinityType.Tweet,
                }"
              >
                <v-col :cols="props.tweet.type === InfinityType.Tweet ? 10 : 12" class="ml-3">
                  <v-row class="covers" :style="{ display: MinDisplay }">
                    <v-col
                      :cols="getImgCol"
                      class="cover"
                      style="padding: 1px"
                      v-for="(img, index) in tweet.imgUrlList"
                      :key="img"
                    >
                      <v-img
                        :src="img"
                        class="min rounded-lg"
                        @click.stop="ZoomIn(index)"
                        cover
                        :aspect-ratio="props.tweet.type === InfinityType.Tweet ? 1 : 16 / 8"
                      />
                    </v-col>
                  </v-row>
                </v-col>
              </v-row>
              <!--        //渲染放大后的图-->
              <div class="max d-img-max" :style="{ display: display }">
                <div class="pa-2">
                  <v-btn variant="tonal" color="#448623" @click.stop="viewImg()">
                    <v-icon size="large">mdi-magnify</v-icon>
                    <span class="text-subtitle-1">查看大图</span>
                  </v-btn>
                </div>
                <div
                  v-for="(img, index) in tweet.imgUrlList"
                  :key="img"
                  style="height: 100%; width: 100%"
                  class="d-img-max-content"
                  :class="[index === ShowIndex ? 'active' : 'None']"
                >
                  <v-img :src="img" @click.stop="ZoomOut" width="100%" />
                  <div v-if="index !== 0" class="d-img-prev" @click.stop="ShowIndex--"></div>
                  <div
                    v-if="index !== tweet.imgUrlList.length - 1"
                    class="d-img-next"
                    @click.stop="ShowIndex++"
                  ></div>
                </div>
                <!--          //放大后图片下方的导航图-->
                <div class="small">
                  <div
                    :class="[{ smallActive: index === ShowIndex }, 'cover-small']"
                    v-for="(img, index) in tweet.imgUrlList"
                    :key="img"
                    @click.stop="select(index)"
                  >
                    <v-img :src="img" width="100%" />
                  </div>
                </div>
              </div>
            </div>
          </template>

          <v-row class="mt-1">
            <v-col>
              <div>
                <v-chip class="mr-2" prepend-icon="mdi-eye" color="blue">
                  <span class="text-base"> {{ tweet.viewNum }}次查看</span>
                </v-chip>
                <v-chip prepend-icon="mdi-infinity" color="red" v-if="tweet.infinityClub != null">
                  <span class="text-base"> {{ tweet.infinityClub.name }}</span>
                </v-chip>
              </div>
            </v-col>
          </v-row>
          <div
            :class="{
              'mt-2': hasImg,
              'mt-1': hasImg,
            }"
            v-if="!props.hideActions"
          >
            <TweetItemActions
              :compact="props.compact"
              :tweet="props.tweet"
              :twType="twType"
              @on-comment-click="handleCommentClick"
            />
          </div>
          <template v-if="showComment">
            <div class="bg-gray-100 dark:bg-neutral-900 my-2 mr-3">
              <v-row v-iShowDetails v-for="comment in tweet.childComments" :id="`${comment.id}`">
                <v-col cols="1" class="ml-4 mr-n4">
                  <v-avatar>
                    <v-img :src="comment.user.userInfo.avatar"></v-img>
                  </v-avatar>
                </v-col>
                <v-col class="mt-1">
                  <v-row>
                    <v-col cols="12">
                      <span class="text-sky-500"> #{{ comment.replySerialNumber + 1 }} </span>
                      <span> &nbsp;{{ comment.user.nickname }} </span>
                      <span class="text-grey">
                        &nbsp;&nbsp;{{ timeAgoFilter(comment.createTime) }}
                      </span>
                    </v-col>
                    <v-col class="mt-n6" cols="12">
                      <span class="">
                        {{ comment.content }}
                      </span>
                      <span class="text-sky-600 ml-2">
                        {{ comment.imgUrlList.length > 0 ? '[图片]' : '' }}
                      </span>
                      <div>
                        <span class="">
                          赞({{ comment.upNum }}) &nbsp; 回复({{ comment.childCommentTotalPages }})
                        </span>
                        <span
                          style="display: none"
                          class="d-i-comment-details ml-2 text-grey"
                          :id="`details-${comment.id}`"
                        >
                          <nuxt-link :to="`/infinity/status/${tweet.id}`"> 查看详情 </nuxt-link>
                        </span>
                      </div>
                    </v-col>
                  </v-row>
                  <v-divider class="my-2"></v-divider>
                </v-col>
              </v-row>
              <v-divider class="my-2"></v-divider>
              <!--/*              <div class="text-sky-600" style="margin-left: 8.3333333333%"> 查看更多评论 </div>*/-->
              <div class="text-sky-600" style="margin-left: 8.3333333333%">查看更多评论</div>
              <div
                class="text-sky-600 mt-2"
                style="margin-left: 8.3333333333%"
                @click.stop="showComment = !showComment"
              >
                收起评论
              </div>
            </div>
          </template>
        </div>
      </v-col>
      <!--      <div>{{ twType }}/{{ props.tweet.type }}</div>-->
    </v-row>
  </client-only>
</template>
<script setup lang="ts">
import { clog } from '~/utils/clog'
import useTailwindConfig from '~/composables/useTailwindConfig'
import { computed, onMounted, ref } from 'vue'
import TweetItemActions from '~/components/Tcomponents/Tweet/Item/Actions/index.vue'
import { InfinityI, InfinityType, TwShowStatus } from '~/types/infinity'
import { timeAgoFilter } from '~/composables/useTools'
import { useInfinityStore } from '~/stores/infinity/infinityStore'
import { useInfinityStatusStore } from '~/stores/infinity/infinityStatusStore'
import A from '~/pages/messages/chats/a.vue'

const { twitterBorderColor } = useTailwindConfig()

// const emitter = useEmitter()
const props = defineProps<{
  tweet: InfinityI
  compact?: boolean
  hideActions?: boolean
  timeLine?: boolean
  timeLineHeight?: string
}>()
const hasImg = computed(() => {
  return props.tweet.imgUrlList?.length !== 0
})
const twType = ref(TwShowStatus.index)
onMounted(() => {
  setTwType()
})

const setTwType = () => {
  if (!props.compact) {
    twType.value = TwShowStatus.status
    return
  }
  if (
    props.tweet.type === InfinityType.Tweet ||
    props.tweet.type === InfinityType.Article ||
    props.tweet.type === InfinityType.Question ||
    props.tweet.type === InfinityType.Answer
  ) {
    twType.value = TwShowStatus.index
    return
  }
  if (props.tweet?.replyUserTweetId == null) {
    twType.value = TwShowStatus.comment
    return
  } else {
    twType.value = TwShowStatus.reply
    return
  }
}
const tweetBodyWrapper = computed(() => (props.compact ? 'ml-16' : 'ml-2 mt-4'))

const textSize = computed(() => (props.compact ? 'text-base' : 'text-xl'))
const getImgCol = computed(() => {
  switch (props.tweet.imgUrlList.length) {
    case 1:
      return 12
    case 2:
      return 6
    case 3:
      return 6
    case 4:
      return 6
    default:
      return 4
  }
})
const ShowIndex = ref()
const display = ref('none')
const MinDisplay = ref('flex')

const showComment = ref(false)
const infinityStore = useInfinityStore()

function handleCommentClick() {
  if (infinityStore.isHome) {
    if (props.tweet.childCommentNum != 0) {
      showComment.value = !showComment.value
    } else {
      clog('//todo reply open dialog')
      //todo reply open dialog
    }
  } else {
    const infinityStatusStore = useInfinityStatusStore()
    infinityStatusStore.replyInfinityData = props.tweet
    infinityStatusStore.replyDialog = true
  }
}

function ZoomIn(i) {
  display.value = 'block'
  MinDisplay.value = 'none'
  ShowIndex.value = i
  document.getElementById(props.tweet.id).scrollIntoView({
    behavior: 'smooth',
  })
}

function ZoomOut() {
  display.value = 'none'
  MinDisplay.value = 'flex'
}

function select(i) {
  ShowIndex.value = i
  document.getElementById(props.tweet.id).scrollIntoView({
    behavior: 'smooth',
  })
}

const visibleRef = ref(false)

const viewImg = async () => {
  visibleRef.value = true
  clog(props.tweet.imgUrlList[ShowIndex.value])
  clog((visibleRef.value = true))
  //这里element是我们要禁用鼠标滚轮触发滚动条的元素
  await nextTick()
  // const main: any = document.querySelector('#main-container > div:nth-child(2) > div')
  const main: any = document.querySelector('.v-main')
  main.onmousewheel = () => {
    // if (ShowIndex.value >= props.tweet.imgUrlList.length) {
    //   ShowIndex.value = 0
    // }
    // ShowIndex.value += 1
    // console.log(ShowIndex.value)
    return false
  }
}

const onHide = () => {
  // const main: any = document.querySelector('#main-container > div:nth-child(2) > div')
  const main: any = document.querySelector('.v-main')
  main.onmousewheel = () => true
  visibleRef.value = false
}
</script>

<style scoped>
.d-img-next {
  cursor: url(),
    pointer;
  right: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 33%;
  z-index: 10;
}

.d-img-prev {
  cursor: url(),
    pointer;
  left: 0;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  top: 0;
  width: 33%;
  z-index: 10;
}

.d-img-max-content {
  background: #f4f5f7;
  position: relative;
  text-align: center;
  width: 100%;
}

.ImgCard {
  width: 70%;
  /*width: v-bind('props.tweet.type==0?70%:100%')*/
}

.notTweCard {
  width: 85%;
}

.covers {
  /*display: flex;*/
  /*justify-content: start;*/
  /*justify-content: space-between;*/
  /*flex-wrap: wrap;*/
}

.cover {
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  /*width: 33%;*/
  /*height: 33%;*/
  /*margin: 10px 0;*/
}

.min {
  /*border-radius: 4px;*/
  cursor: zoom-in;
}

.max {
  cursor: zoom-out;
  width: 100%;
}

.small {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cover-small {
  display: flex;
  justify-content: center;
  width: 10%;
  margin: 10px 0;
  opacity: 0.6;
  cursor: pointer;
}

.cover-small:hover {
  opacity: 1;
}

.active {
  display: flex;
}

.None {
  display: none;
}

.smallActive {
  opacity: 1;
}
</style>
